<template>
  <div class="container appChinaedu">
    <div class="btnBox">
      <App-Button @clickBtn="addCustome" width='3.3rem' btnBgc='#57B8FF'>新增用户</App-Button>
      <!-- <App-Button @clickBtn="clickBtn" width='4.05rem' marginLeft='0.5rem' btnBgc='#FF9300'>学校名称查重</App-Button> -->
    </div>
    <div class="contBox">
      <div class="mescroll">
      <mescroll-vue
        ref="mescroll"
        :up="mescrollUp"
        @init="mescrollInit"
      >
        <div v-for="item in dataList" :key='item'>
          <Card :cardList="item" @cardListTo="cardListTo" @cardListTracking='cardListTracking'></Card>
        </div>
      </mescroll-vue>
    </div>
    </div>
  </div>
</template>

<script>
import Card from "../components/Card";
import AppButton from "../components/AppButton";
import MescrollVue from "../../../../static/mescroll/mescroll.vue";
import "../../../../static/mescroll/mescroll.min";
export default {
  name: "Chinaedu",
  components: {
    Card,
    AppButton,
    MescrollVue
  },
  data() {
    return {
      cardList: [],
      mescroll: null,
      mescrollDown: {},
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback,
        isBounce:false
      },
      up:{
        
      },
      belongType:'',
      page: {
        pageNum: 1,
        pageSize: 10
      },
      dataList: [] // 列表数据
    };
  },
  methods: {
    clickBtn() {
      console.log("点击按钮");
    },

    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    upCallback(page, mescroll) {
      // 联网请求
      let params = {
        pageNum: page.num, // 页码
        pageSize: page.size, // 每页长度
        belongType: 1,
        sortField: "create_date",
        sortType: "desc",
        isContainF: "1" //去掉F类型的查询
      };
      this.$api.agent
        .investmentQueryChinaedu(params)
        .then(response => {
          // 请求的列表数据
          let arr = response.investmentInfos;
          // 如果是第一页需手动置空列表
          if (page.pageNum === 1) this.dataList = [];
          // 把请求到的数据添加到列表
          this.dataList = this.dataList.concat(arr);
          console.log(this.dataList)
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
        })
        .catch(e => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr();
        });
    },
    cardListTo(val) {
      this.$router.push({
        path: "/Mobile/CustomerInfo/CustomerInfo",
        query: {
          id: val.id,
          name:'mychinaedu'
        }
      });
    },
    // 跟进
    cardListTracking(params){
      this.$router.push({
        path: "/Mobile/Tracking/Tracking",
        query: {
          id: params.id,
          name:'addMychinaeduTracking'
        }
      });
    },
    // 新增用户
    addCustome(){
      this.$router.push({
        path: "/Mobile/CustomerInfo/AddCustomer",
        query: {
          name:'addMychinaeduCustomer',
          belongType:'1'
        }
      });
    }
  },
  mounted() {
    this.mescroll.lockDownScroll( true );
    // console.log(this.dataList);
    // this.mescroll.setBounce(false)
    // this.getData()
  },
  beforeDestroy(){
    this.mescroll.destroy();
  }
};
</script>

<style lang='scss' scoped>
.contBox{
  width: 9.2rem;
  margin: 0 auto;
}
.container{
  .btnBox{
    width: 8.14rem; 
    height: 1.07rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 8px 0px rgba(204, 204, 204, 0.5);
    margin-bottom: 0.32rem;
    padding: 0.53rem;
    position: fixed;
		top: 0;
		bottom: 0;
    left: 0;
    right: 0;
    margin-left:auto;
    margin-right:auto;
  }
}
.appChinaedu{
  .mescroll{
    position: fixed;
		top: 2.58rem;
		bottom: 0;
    height: 580px;/*如设置bottom:50px,则需height:auto才能生效*/
  }
}
</style>


